import React, { useEffect, useState } from 'react';
import { Select, Spin } from 'antd';
import styled from 'styled-components';
import { apiService } from '@/flowService';

const EmptyContainer = styled.div`
  display: flex;
  height: 120px;
  align-items: center;
  justify-content: center;
`;

const ApiSelect = ({ value, onChange, suiteCode }) => {
  const [apiList, setApiList] = useState([]);
  const [apiLoading, setApiLoading] = useState(false);

  const loadData = async () => {
    setApiLoading(true);
    try {
      const res = await apiService.getApiListBySuiteCode(suiteCode);
      if (res.success) {
        setApiList(res.result);
      }
    } finally {
      setApiLoading(false);
    }
  };

  useEffect(() => {
    if (suiteCode) {
      loadData();
    }
  }, [suiteCode]);

  const handleChange = (apiCode) => {
    onChange?.(apiCode);
  };

  return (
    <Select
      value={value}
      placeholder="请选择接口"
      style={{ width: '100%' }}
      onChange={handleChange}
      showSearch
      notFoundContent={
        <EmptyContainer>
          <Spin spinning={apiLoading}>
            {!apiLoading && <span>无数据</span>}
          </Spin>
        </EmptyContainer>
      }
    >
      {apiList.map(item => (
        <Select.Option key={item.apiCode} value={item.apiCode}>
          {item.apiName}
        </Select.Option>
      ))}
    </Select>
  );
};

export default ApiSelect; 